import React, { Component } from 'react';
import gift from './subCard.module.scss'
import { getCode, createSubCard } from '../../utils/interface'
import { times } from '../../utils/maths'
import { getUrlParam } from '../../utils/tools'
import { withRouter ,Redirect } from 'react-router-dom'


class Gift extends Component {
    constructor(props) {
        super(props);
        this.state = {
            state: false,
            inpValu: "",
            msg: [1, 1, 1, 1, 1, 1],
            idempotenceToken: "",
            msgId: "",
            bok:1,
            keys:""
        }
    }
    render() {
        return (
            <div className={gift.gift} key={this.state.keys}>
                <div className={gift.view}>
                    <p className={gift.title}>
                        受赠予者需在本小程序注册，且授权手机号一致。如未注册请点击
                    <span>点击右上角分享给亲属注册</span>
                 
                    </p>
                    <div className={gift.item}>
                        <input ref="name" placeholder='请填写受赠予人姓名' />
                    </div>
                    <div className={gift.item}>
                        <input ref="phone" placeholder='请填写受赠予人手机号' />
                    </div>
                    <div className={gift.item}>
                        <p>￥</p>
                        <input ref="m_price" placeholder='设置每月消费上限' />
                    </div>
                    <p className={gift.btn} onClick={this.action.bind(this)}>确认</p>
                </div>
                {this.state.state ? (
                    <div className={gift.showAction} onClick={this.closeAction.bind(this)}>
                        <div className={gift.modu} onClick={(e)=>(this.setFocus(e))}>
                            <p className={gift.title}>赠送亲属卡</p>
                            <p className={gift.ts}>验证码已发送，请输入验证码，验证身份</p>
                            <input type="tel" maxLength="6" onChange={this.handleChange.bind(this)} ref={(input) => this.input = input} defaultValue={this.state.inpValu} />
                            <ul>
                                {this.state.msg.map((item, idx) => {
                                    return (
                                        <li key={idx}>
                                            {this.state.inpValu[idx]}
                                        </li>
                                    )
                                })}
                            </ul>
                        </div>
                    </div>
                ) : ''}
            </div>
        );
    }
    closeAction(){
        this.setState({
            state:false
        })
    }
    action() {
        this.setState({
            inpValu:""
        })
        if (!this.refs.name.value) {
          alert("请输入受赠予人的姓名");
          return false;
        }
        if (!this.refs.phone.value) {
            alert('请输入受赠予手机号')
            return false
        }
        
        if (!(/^1[3456789]\d{9}$/.test(this.refs.phone.value))) {
            alert("手机号码有误，请重填");
            return false;
        }
        if (!this.refs.m_price.value) {
            alert('请输入每月消费上线')
            return false
        }
        if ( getUrlParam('phone') === this.refs.phone.value) {
            alert('不能给自己发副卡')
            return false
        }
        
        this.setState({
            state: true
        }, () => {
            getCode({ phone: getUrlParam('phone')}).then(res => {
                this.setState({
                    msgId:res.data.result
                })
            })
            this.input.focus()
        })
    }
    setFocus(e) {
        console.log(e)
        this.input.focus()
        e.stopPropagation();
    }
    handleChange(e) {
        let that = this
        
        this.setState({
            inpValu: e.target.value
        })
        if (e.target.value.length === 6) {
            that.setState({
                state: false
            })
            console.log(this.input.value)
            createSubCard(
                {
                    phone: that.refs.phone.value,
                    payLimit: times(that.refs.m_price.value, 100),
                    mainCardId: getUrlParam('cardId'),
                    ownPhone: getUrlParam('phone'),
                    code: this.input.value,
                    subCardType: getUrlParam('type'),
                    msgId: this.state.msgId,
                    name:""
                }, this.state.idempotenceToken).then(res => {
                    if (res.data.status === 200) {
                        this.setState({
                            bok:2
                        })
                        window.wx.miniProgram.navigateTo({
                            url: "/pages/subSuccess/succSuccess?type=" + getUrlParam('type')+ '&payLimit=' + that.refs.m_price.value+'&cardId='+getUrlParam('cardId')+'&phone='+getUrlParam('phone')+'&subPhone='+that.refs.phone.value
                        })
                    } else {
                        alert(res.data.message)
                    }
                })
        }
    }
    componentDidMount() {
        document.title = "赠送亲属卡"
        
        this.setState({
            keys:Math.random()
        })
        if(this.state.bok == 2){
            this.props.history.go(-1)
        }        
    }
}
export default withRouter(Gift);